<%
/**
 * Alert 消息提示组件
 * @param {String} type - 消息类型：'success', 'error', 'warning', 'info'，默认为 'info'
 * @param {String} message - 消息内容
 * @param {String} title - 可选的标题
 * @param {Boolean} dismissible - 是否可关闭，默认false
 * @param {String} className - 额外的CSS类，可选
 */

const alertType = typeof type !== 'undefined' ? type : 'info';
const alertMessage = typeof message !== 'undefined' ? message : '';
const alertTitle = typeof title !== 'undefined' ? title : '';
const isDismissible = typeof dismissible !== 'undefined' ? dismissible : false;
const extraClass = typeof className !== 'undefined' ? className : '';

// 根据类型设置样式
let alertClass = '';
let iconClass = '';

switch(alertType) {
    case 'success':
        alertClass = 'bg-green-50 border-green-200 text-green-700';
        iconClass = 'fas fa-check-circle text-green-400';
        break;
    case 'error':
        alertClass = 'bg-red-50 border-red-200 text-red-700';
        iconClass = 'fas fa-exclamation-circle text-red-400';
        break;
    case 'warning':
        alertClass = 'bg-yellow-50 border-yellow-200 text-yellow-700';
        iconClass = 'fas fa-exclamation-triangle text-yellow-400';
        break;
    case 'info':
    default:
        alertClass = 'bg-blue-50 border-blue-200 text-blue-700';
        iconClass = 'fas fa-info-circle text-blue-400';
        break;
}
%>

<% if (alertMessage) { %>
    <div class="border rounded-lg p-2 my-2 <%= alertClass %> <%= extraClass %>" <% if (isDismissible) { %>id="alert-<%= Math.random().toString(36).substr(2, 9) %>"<% } %>>
        <div class="flex">
            <i class="<%= iconClass %> mr-3 mt-1"></i>
            <div class="flex-1">
                <% if (alertTitle) { %>
                    <div class="font-medium mb-1"><%= alertTitle %></div>
                <% } %>
                <div class="text-sm"><%= alertMessage %></div>
            </div>
            <% if (isDismissible) { %>
                <button type="button" class="ml-3 text-gray-400 hover:text-gray-600" onclick="this.parentElement.parentElement.style.display='none'">
                    <i class="fas fa-times"></i>
                </button>
            <% } %>
        </div>
    </div>
<% } %>